<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索引擎切换器</title>
    <link rel="stylesheet" href="css/popup.css">
</head>

<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <div class="logo">
                <span class="logo-icon">🔍</span>
                <span class="logo-text">搜索引擎切换器</span>
            </div>
            <button class="settings-btn" id="settingsBtn" title="设置">
                <span>⚙️</span>
            </button>
        </div>

        <!-- 当前搜索引擎显示 -->
        <div class="current-engine" id="currentEngine">
            <span class="engine-icon">🔍</span>
            <span class="engine-name">Google</span>
            <button class="switch-btn" id="switchBtn" title="切换搜索引擎">
                <span>🔄</span>
            </button>
        </div>

        <!-- 搜索框 -->
        <div class="search-container">
            <input type="text" id="searchInput" class="search-input" placeholder="输入搜索内容..." autofocus>
            <button id="addToFavoritesBtn" class="favorite-search-btn" title="收藏当前搜索">
                <span>⭐</span>
            </button>
            <button class="search-btn" id="searchBtn">
                <span>🔍</span>
            </button>
        </div>

        <!-- 搜索建议 -->
        <div class="suggestions" id="suggestions" style="display: none;">
            <!-- 动态生成 -->
        </div>

        <!-- 搜索引擎选择器 -->
        <div class="engine-selector" id="engineSelector" style="display: none;">
            <div class="selector-header">
                <span>选择搜索引擎</span>
                <button class="close-btn" id="closeSelectorBtn">×</button>
            </div>
            <div class="engine-grid" id="engineGrid">
                <!-- 动态生成 -->
            </div>
        </div>

        <!-- 快速功能按钮 -->
        <div class="quick-actions">
            <button class="action-btn" id="historyBtn" title="搜索历史">
                <span class="btn-icon">📚</span>
                <span class="btn-text">历史</span>
            </button>
            <button class="action-btn" id="favoritesBtn" title="收藏夹">
                <span class="btn-icon">⭐</span>
                <span class="btn-text">收藏</span>
            </button>
            <button class="action-btn" id="aggregateSearchBtn" title="聚合搜索">
                <span class="btn-icon">🚀</span>
                <span class="btn-text">聚合</span>
            </button>
            <button class="action-btn" id="customEngineBtn" title="自定义搜索引擎">
                <span class="btn-icon">➕</span>
                <span class="btn-text">自定义</span>
            </button>
        </div>

        <!-- 搜索历史 -->
        <div class="history-panel" id="historyPanel" style="display: none;">
            <div class="panel-header">
                <span>搜索历史</span>
                <div class="panel-actions">
                    <button class="clear-btn" id="clearHistoryBtn" title="清空历史">🗑️</button>
                    <button class="close-btn" id="closeHistoryBtn">×</button>
                </div>
            </div>
            <div class="history-list" id="historyList">
                <!-- 动态生成 -->
            </div>
        </div>

        <!-- 自定义搜索引擎表单 -->
        <div class="custom-engine-form" id="customEngineForm" style="display: none;">
            <div class="form-header">
                <span>添加自定义搜索引擎</span>
                <button class="close-btn" id="closeFormBtn">×</button>
            </div>
            <div class="form-content">
                <div class="form-group">
                    <label for="engineName">名称：</label>
                    <input type="text" id="engineName" placeholder="例如：我的搜索">
                </div>
                <div class="form-group">
                    <label for="engineUrl">搜索URL：</label>
                    <input type="text" id="engineUrl" placeholder="例如：https://example.com/search?q={query}">
                    <small>使用 {query} 作为搜索关键词占位符</small>
                </div>
                <div class="form-group">
                    <label for="engineIcon">图标（可选）：</label>
                    <input type="text" id="engineIcon" placeholder="例如：🔍">
                </div>
                <div class="form-actions">
                    <button class="cancel-btn" id="cancelBtn">取消</button>
                    <button class="save-btn" id="saveEngineBtn">保存</button>
                </div>
            </div>
        </div>

        <!-- 状态提示 -->
        <div class="status-message" id="statusMessage" style="display: none;">
            <!-- 动态显示状态信息 -->
        </div>
    </div>

    <!-- 脚本 -->
    <script src="js/config.js"></script>
    <script src="js/theme-manager.js"></script>
    <script src="js/popup.js"></script>
</body>

</html>